<template>
  <div class="home">
    <mynav></mynav>

    <!-- 弹出层 -->
    <van-popup
      v-model="show"
      position="bottom"
      closeable
      close-icon="cross"
      close-icon-position="top-left"
      :style="{ height: '100%' }"
    >
      <!-- 频道分类 -->
      <div class="catogates">
        <!-- 我的频道 -->
        <div class="myChannel">
          <div class="chanTag">
            <span class="my-chan">我的频道</span>
            <span class="enter-chan">点击进入频道</span>
          </div>
          <div class="edit" @click="delshow()">{{isFlag ? '完成' : '编辑'}}</div>
        </div>
        <div class="channelBox">
          <div class="options" v-for="(cato,index) in catos" :key="cato.id">
            <div class="chanOpt">{{cato.title}}</div>
            <div class="del" v-show="isFlag" @click="delCato(index)">×</div>
          </div>
        </div>
        <!-- 频道推荐 -->
        <div class="myChannel">
          <div class="chanTag">
            <span class="my-chan">频道推荐</span>
            <span class="enter-chan">点击进入频道</span>
          </div>
        </div>
        <div class="channelBox">
          <div class="options" v-for="(addcato,index) in addcatos" :key="addcato.id">
            <div class="chanOpt" @click="addCato(index)">{{ '+'+ addcato.title}}</div>
          </div>
        </div>
      </div>
    </van-popup>
    <van-tabs
      title-active-color="#f85959"
      :swipe-threshold="6"
      sticky
      :offset-top="46"
      @click="getNews"
    >
      <span slot="nav-right" style="color:#fff">加载中...</span>
      <!-- 导航栏更多按钮 -->
      <van-icon
        slot="nav-right"
        name="wap-nav"
        class="moreBtn"
        size="26px"
        color="#666"
        @click="showPopup"
      />
      <van-tab v-for="cato in catos" :key="cato.id" :title="cato.title" :name="cato.id">
        <!-- 推荐内容部分 -->
        <div class="container">
          <lazy-component>
            <div class="setTop" v-for="info in infos" :key="info.id" v-lazy="info">
              <!--  第一种布局视频 -->
              <template v-if="info.isvideo===1">
                <div class="newsList newsVideo" @click="goNewsInfo(info.id)">
                  <h3 class="newsTitle">{{info.title}}</h3>
                  <div class="videoItem">
                    <img :src="info.img_url" alt />
                    <!-- <video class='video' :src="info.video_url" alt controls></video> -->
                    <van-icon name="play-circle" size="60px" class="playBtn" />
                  </div>

                  <div class="newsDec">
                    <span class="news-side">{{info.media_name}}</span>
                    <span class="comment">评论</span>
                    <span class="comment-count">{{info.commentNum || 0}}</span>
                    <span class="before-time">{{getfmt(info.datetime)}}</span>
                  </div>
                </div>
              </template>

              <!-- 第二种布局 三张图片上下 -->
              <template v-else-if="info.img_list!==null">
                <div class="newsList" @click="goNewsInfo(info.id)">
                  <h3 class="newsTitle">{{info.title}}</h3>
                  <div class="newsImgs">
                    <img :src="JSON.parse(info.img_list)[0].url" alt />
                    <img :src="JSON.parse(info.img_list)[1].url" alt />
                    <img :src="JSON.parse(info.img_list)[2].url" alt />
                  </div>
                  <div class="newsDec">
                    <span class="news-side">{{info.media_name}}</span>
                    <span class="comment">评论</span>
                    <span class="comment-count">{{info.commentNum || 0}}</span>
                    <span class="before-time">{{getfmt(info.datetime)}}</span>
                  </div>
                </div>
              </template>
              <!-- 第三种布局 一张图片左右 -->

              <template v-else-if="info.img_url!==null">
                <div class="newsList twoCol" @click="goNewsInfo(info.id)">
                  <div class="news-left">
                    <h3 class="newsTitle">{{info.title}}</h3>

                    <div class="newsDec">
                      <span class="news-side">{{info.media_name}}</span>
                      <span class="comment">评论</span>
                      <span class="comment-count">{{info.commentNum || 0}}</span>
                      <span class="before-time">{{getfmt(info.datetime)}}</span>
                    </div>
                  </div>
                  <div class="newsImgs">
                    <img :src="info.img_url" alt />
                  </div>
                </div>
              </template>
              <!--第四种布局  置顶新闻无图片 -->
              <template v-else>
                <div class="newsList" @click="goNewsInfo(info.id)">
                  <!-- 标题 -->
                  <h3 class="newsTitle">{{info.title}}</h3>
                  <!-- 出处详细信息 -->
                  <div class="newsDec">
                    <span class="setTop-details">置顶</span>
                    <span class="news-side">{{info.media_name}}</span>
                    <span class="comment">评论</span>
                    <span class="comment-count">{{info.commentNum || 0}}</span>
                    <span class="before-time">{{getfmt(info.datetime)}}</span>
                  </div>
                </div>
              </template>
            </div>
          </lazy-component>
        </div>
      </van-tab>
    </van-tabs>
    <mytabbar></mytabbar>
  </div>
</template>
<script>
import mynav from '@/components/Mynav'
import mytabbar from '@/components/Mytabbar'
export default {
  data: () => ({
    value: '',
    show: false,
    isFlag: false,
    catos: [],
    infos: [],
    infosearch: [],
    addcatos: []
  }),
  created() {
    this.getCatos()
    this.getAddCatos()
    this.getNews(1)
  },
  methods: {
    // 获取分类标题列表
    async getCatos() {
      const {
        data: { status, data }
      } = await this.$http.get('/api/getnavlist/1')
      if (status !== 0) console.log('err')
      this.catos = data
    },
    // 获取添加类型列表
    async getAddCatos() {
      const {
        data: { status, data }
      } = await this.$http.get('/api/getnavlist/4')
      if (status !== 0) console.log('err')
      this.addcatos = data
    },
    // 通过id获取对应的数据
    async getNews(name) {
      const {
        data: { status, data }
      } = await this.$http.get('/api/getnewslist/' + name)
      if (status !== 0) console.log('err')
      this.infosearch = this.infos = data
      this.infos.forEach((item, index) => {
        if (
          item.img_url === null &&
          item.img_list === null &&
          item.video_url === null
        ) {
          this.infos.splice(index, 1)
          this.infos.unshift(item)
        }
        this.$set(item, 'commentNum', 0)
        this.getComments(item)
      })
    },
    // 获取评论数
    async getComments(item) {
      const {
        data: { status, data }
      } = await this.$http.get('/api/getcomment/' + item.id)
      if (status !== 0) console.log('err')
      item.commentNum = data.length
    },
    // 搜索
    onSearchF(value) {
      // console.log(value)
      //   console.log(111)
      this.infos = JSON.parse(JSON.stringify(this.infosearch))
      this.infos = this.infos.filter(item => {
        if (item.title.includes(value)) {
          return true
        }
      })
    },

    // 点击进入详情页获取
    goNewsInfo(id) {
      this.infos.forEach(item => {
        if (item.id !== id) {
          return
        }
        if (item.isvideo === 1) {
          this.$router.push('./winfo/' + id)
        } else {
          this.$router.push('./home/newinfo/' + id)
        }
      })
    },
    // 获取距离当前时间戳
    getfmt(time) {
      return this.getFormate(time)
    },
    // t弹出层显示
    showPopup() {
      this.show = true
    },
    // 删除按钮显示
    delshow() {
      this.isFlag = !this.isFlag
    },
    // 点击删除
    delCato(index) {
      // console.log(index)
      const deletedCato = this.catos.splice(index, 1)
      // console.log(deletedCato)
      this.addcatos.push(deletedCato[0])
    },
    // 点击添加
    addCato(index) {
      // console.log(index)
      const toAddCato = this.addcatos.splice(index, 1)
      // console.log(toAddCato)
      this.catos.push(toAddCato[0])
    }
  },
  computed: {},
  components: {
    mynav,
    mytabbar
  }
}
</script>
<style lang="less" scoped>
.home {
  padding: 46px 0 50px 0;
  .moreBtn {
    position: fixed;
    right: 0px;
    height: 44px;
    width: 40px;
    line-height: 44px;
    background-color: #fff;
  }
  .catogates {
    margin: 46px 20px 40px;
    .myChannel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .enter-chan {
        color: #999;
        font-size: 12px;
        margin-left: 6px;
      }
      .edit {
        padding: 2px 10px;
        color: #f85959;
        border: 1px solid #f85959;
        border-radius: 14px;
      }
    }
    .channelBox {
      width: 100%;
      display: flex;
      justify-content: left;
      align-items: center;
      flex-wrap: wrap;
      margin: 16px 0;
      .options {
        position: relative;
        width: 23%;
        height: 40px;
        background-color: #f1efef;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
        margin: 0px 6px 10px 0px;
        .del {
          position: absolute;
          top: -8px;
          right: -4px;
          background-color: #d5d5d5;
          height: 20px;
          line-height: 20px;
          width: 20px;
          border-radius: 50%;
          color: #fff;
        }
      }
    }
  }
  .container {
    margin: 0 20px;
    .newsList {
      padding: 20px 0;
      border-bottom: 1px solid #eee;
      .newsTitle {
        margin: 0;
        font-weight: 400;
        color: #131313;
      }
      .newsDec {
        margin-top: 4px;
        font-size: 12px;
        color: #999;
        span {
          display: inline-block;
          margin-right: 6px;
        }
        .setTop-details {
          padding: 1px 4px;
          color: #f85959;
          border: 1px solid #f79999;
          border-radius: 4px;
        }
      }

      .newsImgs {
        margin: 4px 0 8px 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: space-around;
        img {
          width: 33%;
        }
      }
    }
    .twoCol {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .news-left {
        width: 67%;
      }
      .newsImgs {
        width: 33%;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .newsVideo {
      .videoItem {
        position: relative;
        width: 100%;
        margin-top: 8px;
        img {
          width: 100%;
          height: 100%;
        }
        .playBtn {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -30px;
          margin-top: -30px;
          background-color: #555;
          opacity: 0.3;
          color: #000;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>
